<template>
    <div class="home">
        <h2>单面模板闭环-Action-State-View</h2>
        <h2>{{count}}</h2>
        <h2>计算属性：{{mypow}}</h2>
        <button @click="count++">+</button>
        <button @click="count--">-</button>
        <hr>
        <h2>使用全局状态</h2>
        <h2>{{$store.state.num}}</h2>
        <h2>vuexpow: {{vuexpow}}</h2>
        <h2>vuexpow-getters: {{$store.getters.vxnum}}</h2>
        <button @click="$store.state.num++">+</button>
        <button @click="$store.state.num--">-</button>
        <h2>使用Mutations更新状态</h2>
        <h2>DNUM: {{$store.state.dnum}}</h2>
        <button @click="add1">+</button>
        <button @click="sub1">-</button>
        <h2>使用Mutations更新状态-带参数</h2>
        <h2>DNUM: {{$store.state.dnum}}</h2>
        <button @click="add2">+</button>
        <button @click="sub2">-</button>
        <HelloWorld :count="count"></HelloWorld>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'Home',
        data() {
            return {
                count: 0,
            }
        },
        computed: {
            mypow() {
                return this.count * this.count;
            },
            vuexpow() {
                return this.$store.state.num * this.$store.state.num;
            }
        },
        components: {
            HelloWorld
        },
        methods: {
            add1() {
                this.$store.commit('add');
            },
            sub1() {
                this.$store.commit('sub');
            },
            add2() {
                let count = 2;
                this.$store.commit('add2', count);
            },
            sub2() {
                let count = 2;
                //只能带一个参数，如果想传多值，就用对象
                //commit可以是一个对象，参考官网
                this.$store.commit('sub2', count);
            }
        }
    }
</script>
